<template>
	<view :style="{ 'padding-top': topHeight + 'px' }">
		<!-- 导航栏 -->
		<navigation title="意向金" @topHeight="topHeightFn"></navigation>
		<view class="line"></view>
		<view class="" v-if="JSON.stringify(confirm) !== '{}'"><approverMsg :value="confirm"></approverMsg></view>
		<navigator class="left_box" v-if="order.order_id" :url="'/pages/order/detail/detail?order_id=' + this.order.order_id"><text>查看定单详情</text></navigator>
		<view class="line"></view>
		<!-- 订单信息 -->
		<view class="hs-panel">
			<view class="hs-panel-head"><view class="title">定金信息</view></view>
			<view class="hs-panel-body">
				<view class="hs-list-item" v-if="order.company_id">
					<view class="hs-list-item-left">所属公司</view>
					<view class="hs-list-item-right">{{ dictionary.getPickerTitle('companyList', order.company_id) }}</view>
				</view>
				<view class="hs-list-item" v-if="order.news_type">
					<view class="hs-list-item-left">订单类型</view>
					<view class="hs-list-item-right">{{ dictionary.getPickerTitle('newsTypeList', order.news_type) }}</view>
				</view>
				<view class="hs-list-item" v-if="order.hotel_id > 0">
					<view class="hs-list-item-left">意向酒店</view>
					<view class="hs-list-item-right">{{ order.hotel_text }}</view>
				</view>
			<view class="hs-list-item" v-if="order.hall && order.hall.length > 0">
				<view class="hs-list-item-left">宴会厅</view>
				<view class="hs-list-item-right"><van-tag class="van-tag" type="success" v-for="item in order.hall" :key="item.id" >{{item.title}}</van-tag></view>
			</view>
			<view class="hs-list-item" v-if="order.banquet_type && order.banquet_type.length > 0">
				<view class="hs-list-item-left">宴会类型</view>
				<view class="hs-list-item-right">{{dictionary.convertBanquetTypeToStr(order.banquet_type)}}</view>
			</view>
				<view class="hs-list-item" v-if="order.bridegroom">
					<view class="hs-list-item-left">{{order.news_type!=7 && order.news_type!=8 ? '新郎姓名' : '联系人'}}</view>
					<view class="hs-list-item-right">{{ order.bridegroom }}</view>
				</view>
				<view class="hs-list-item" v-if="order.bridegroom_mobile">
					<view class="hs-list-item-left">{{order.news_type!=7 && order.news_type!=8 ? '新郎电话' : '联系电话'}}</view>
					<view class="hs-list-item-right">{{ order.bridegroom_mobile }}</view>
				</view>
				<view class="hs-list-item" v-if="order.bride">
					<view class="hs-list-item-left">新娘姓名</view>
					<view class="hs-list-item-right">{{ order.bride }}</view>
				</view>
				<view class="hs-list-item" v-if="order.bride_mobile">
					<view class="hs-list-item-left">新娘电话</view>
					<view class="hs-list-item-right">{{ order.bride_mobile }}</view>
				</view>
				<view class="hs-list-item" v-if="order.prepay_money">
					<view class="hs-list-item-left">意向金金额</view>
					<view class="hs-list-item-right">{{ order.prepay_money }}</view>
				</view>
				<view class="hs-list-item" v-if="order.sign_date">
					<view class="hs-list-item-left">签单时间</view>
					<view class="hs-list-item-right">{{ order.sign_date }}</view>
				</view>
				<view class="hs-list-item" v-if="order.event_date">
					<view class="hs-list-item-left">举办日期</view>
					<view class="hs-list-item-right">{{ order.event_date }}</view>
				</view>
				<view class="remark hs-list-border-top">
					<view class="remark-title">备注</view>
					<view class="remark-content">{{ order.remark }}</view>
				</view>
				<view class="hs-image-group hs-list-border-top" v-if="order.image && order.image.length">
					<view class="hs-image-title">合同照片</view>
					<view class="hs-image-box">
						<template v-for="(img, index) in order.image">
							<image class="img" :key="index" mode="widthFix" :src="img" @click="picture.preViewImage(order.image)"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 款项信息 -->
		<view class="line"></view>
		<view class="hs-panel">
			<view class="hs-panel-head"><view class="title">收款信息</view></view>
			<view class="hs-panel-body">
				<view class="hs-list-item" v-if="income.receivable_no">
					<view class="hs-list-item-left">收据编号</view>
					<view class="hs-list-item-right">{{ income.receivable_no }}</view>
				</view>
				<view class="hs-list-item" v-if="income.income_date">
					<view class="hs-list-item-left">收款日期</view>
					<view class="hs-list-item-right">{{ income.income_date }}</view>
				</view>
				<view class="hs-list-item" v-if="income.income_payment > 0">
					<view class="hs-list-item-left">收款方式</view>
					<view class="hs-list-item-right">{{ dictionary.getPickerTitle('paymentList', income.income_payment) }}</view>
				</view>
				<view class="hs-list-item" v-if="income.income_type > 0">
					<view class="hs-list-item-left">款项性质</view>
					<view class="hs-list-item-right">{{ dictionary.getPickerTitle('exchangeTypeList', income.income_type) }}</view>
				</view>
				<view class="hs-list-item" v-if="income.income_item_price">
					<view class="hs-list-item-left">收款金额</view>
					<view class="hs-list-item-right">{{ income.income_item_price }}</view>
				</view>
				<view class="remark hs-list-border-top" v-if="income.income_remark">
					<view class="remark-title">备注</view>
					<view class="remark-content">{{ income.income_remark }}</view>
				</view>
				<view class="hs-image-group hs-list-border-top" v-if="income.receipt_img && income.receipt_img.length">
					<view class="hs-image-title">收据</view>
					<view class="hs-image-box">
						<template v-for="(img, index) in income.receipt_img">
							<image class="img" :key="index" mode="widthFix" :src="img" @click="picture.preViewImage(income.receipt_img)"></image>
						</template>
					</view>
				</view>
				<view class="hs-image-group hs-list-border-top" v-if="income.note_img && income.note_img.length">
					<view class="hs-image-title">小票</view>
					<view class="hs-image-box">
						<template v-for="(img, index) in income.note_img">
							<image class="img" :key="index" mode="widthFix" :src="img" @click="picture.preViewImage(income.note_img)"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		
			<view class="line"></view>
		<button type="default" class="order_btn" @click="saveFn()" v-if="options.type">保存</button>
		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>

		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess
				:value="confirmList"
				:btnValue="buttons"
				:isShowBtn="options.api ? false : true"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				@resubmit="resubmits"
			></auditProcess>
		</template>
		
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn
				:btnValue="buttons"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				:isShowBtn="options.api ? false : true"
				@resubmit="resubmits"
				@transferSubmit="transferSubmit"
				@submitAgain="submitAgain"
			></footer-action-btn>
		</template>
	</view>
</template>

<script>
import funs from '@/utils/funs.js';
import dictionary from '@/utils/dictionary.js';
import picture from '@/utils/picture.js';

import navigation from '@/component/navigation.vue';
import approverMsg from '@/component/approverMsg.vue'; //审核流程
import auditProcess from '@/component/auditProcess.vue'; //审核流程

import stepsLook from '@/component/steps-look/steps-look.vue'; // 新版审核流程
import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue'; // 底部操作按钮组
import stepsCreate from '@/component/steps-create/steps-create.vue';
import request from '@/utils/request.js';

import sun from '@/utils/sun.js';
export default {
	components: {
		navigation,
		approverMsg,
		auditProcess,
		stepsCreate,
		stepsLook,
		footerActionBtn
	},
	data() {
		return {
			confirm_id: 0,
			order_id: 0,

			options: '',
			isEdit: false,
			order: {
				company_id: '', //所属公司id
				news_type: '', //订单类型
				hotel_id: '', //酒店名
				hotel_text: '',
				banquet_hall_name: '', //宴会厅
				sign_date: '', //签约时间
				event_date: '', //举办时间
				bride_mobile: '', //新娘电话
				bride: '', //新娘姓名
				bridegroom_mobile: '', //新郎电话
				bridegroom: '', //新郎姓名
				receivable_no: '', //收据编号
				income_payment: '', //收款方式
				income_date: '', //收款日期
				image: [],
				prepay_money: '' //意向金
			},
			income: {
				receivable_no: '', //收据编号
				income_item_price: '', //收款金额
				income_date: '', //收款日期
				income_payment: '', //收款方式
				income_remark: '', //备注
				receipt_imgArray: [], //收据图片
				note_imgArray: [], //小票
				income_type: 4, //款项性质
				income_type_text: '意向金' //
			}, // 收款
			property: [
				{
					id: 4,
					title: '意向金'
				}
			],
			payments: [], //收款方式
			selectBox: '',
			confirmList: [],
			buttons: [],
			confirm: {}, //审批信息
			topHeight: '',
			hotelFrom: '',
			hotelID: '',

			transferForm: {
				realname: '',
				user_id: ''
			},
			sequenceData: [], // 新版审核
			confirmSteps: [] // 新版审核
		};
	},
	beforeCreate() {
		this.funs = funs;
		this.dictionary = dictionary;
		this.picture = picture;
	},
	onLoad(options) {
		console.log(options);
		// 添加 从订单详情页添加子项目 包含order_id
		if (options.type) {
			this.options = options;
			this.order_id = this.options.id;
			this.getData(this.options); //获取picker
		} else {
			// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
			if (options.id) {
				this.options = options;
				this.isEdit = true;
				//查看信息
				this.getDetail(this.options);
				this.confirm_id = this.options.id;
				// 审核流程--查看
				this.getConfirmList();
			}
		}

		// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
		if (options.lookApproval) {
			this.options = JSON.parse(options.lookApproval);
			this.isEdit = true;
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			// 审核流程--查看
			this.getConfirmList();
		}
	},
	onShow(e) {
		// #ifdef H5

		// #endif

		// #ifdef APP-PLUS
		uni.$on('globleEvent', rel => {
			this.order.hotel_text = rel.hotelFrom;
			this.order.hotel_id = rel.hotelID;
		});

		// #endif
	},
	methods: {
		//跳转酒店
		jumpSearchHotel() {
			let origin = 'order';
			uni.navigateTo({
				url: '../../searchHotel/searchHotel?origin=' + origin
			});
		},
		topHeightFn(e) {
			this.topHeight = e;
		},
		//获取查看信息
		getDetail(e) {
			let that = this;
			sun.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token: true,
				data: {
					id: e.id,
					type: e.user ? 'confirm_user' : ''
				},
				success(res) {
					if (res.code == 200) {
						that.order = res.data.detail.order ? res.data.detail.order : '';
						that.income = res.data.detail.income ? res.data.detail.income : '';
						that.confirmList = res.data.confirmList ? res.data.confirmList : '';
						that.confirm = res.data.confirm; //代表的是当前审核的信息
						that.buttons = res.data.buttons ? res.data.buttons : '';
						that.companyList = res.data.companyList ? res.data.companyList : '';
						that.newsTypeList = res.data.newsTypeList ? res.data.newsTypeList : '';
						that.payments = res.data.incomePaymentList ? res.data.incomePaymentList : '';
						//判断是否可以编辑
						that.buttons.map((item, index) => {
							if (item.id == 'update') {
								that.isEdit = false;
							}
						});
						that.companyList.map((item, index) => {
							if (item.id == that.order.company_id) {
								that.order.company_text = item.title;
							}
						});
						that.newsTypeList.map((item, index) => {
							if (index == that.order.news_type) {
								that.order.news_type_text = item;
							}
						});
						that.property.map((item, index) => {
							if (item.id == that.income.income_type) {
								that.income.income_type_text = item.title;
							}
						});

						that.payments.map((item, index) => {
							if (item.id == that.income.income_payment) {
								that.income.income_payment_text = item.title;
							}
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		// 提交转交
		transferSubmit() {
			let that = this;
			sun.request({
				url: '/api/order.audit/transfer',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					user_id: that.transferForm.user_id
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						uni.navigateBack({});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 点击取消时清除转交人员信息
		clearTransferForm() {
			this.transferForm = {
				realname: '',
				user_id: ''
			};
		},

		//查看详情审核流程
		getConfirmList() {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditResult',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id
				},
				success(res) {
					that.confirmSteps = res.data.process;
				}
			});
		},
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditProcess',
				showLoading: true,
				token: true,
				data: Object.assign(
					{
						order: that.order
					},
					{
						audit_type: 'prepay'
					}
				),
				success(res) {
					that.sequenceData = res.data.process;
				}
			});
		},


		// 重新提交
		submitAgain() {
			let confirm_id = this.confirm_id;
			uni.navigateTo({
				url: '/pages/order/createOrder/createOrder?confirm_id=' + confirm_id
			});
		},

		//提交审核
		saveFn() {
			let that = this;
			sun.request({
				url: '/h5/order.prepay/docreate',
				showLoading: true,
				token: true,
				data: {
					id: that.options.id,
					order: that.order ? JSON.stringify(that.order) : '',
					income: that.income ? JSON.stringify(that.income) : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 编辑提交
		editFn(api, id) {
			let that = this;
			sun.request({
				url: api,
				showLoading: true,
				token: true,
				data: {
					order_confirm_id: that.options.id,
					id: id ? id : '',
					order: that.order ? JSON.stringify(that.order) : '',
					income: that.income ? JSON.stringify(that.income) : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		//底部评论按钮
		resubmits(item) {
			if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
				this.commentFn(item);
			} else if (item.label == '转交') {
				uni.navigateTo({
					url: '../../../component/search/search?type=' + 'changeUser'
				});
			} else {
				this.editFn(item.api, item.id);
			}
		},
		// 编辑提交
		commentFn(e) {
			let that = this;
			let url = '';
			if (e.label == '拒绝' && that.confirmList.length == 0) {
				url = '/api/order.audit/reject';
			} else if (e.label == '同意' && that.confirmList.length == 0) {
				url = '/api/order.audit/accept';
			} else {
				url = e.api;
			}
			sun.request({
				url: url,
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					content: e.content ? e.content : '',
					image: e.image ? e.image : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						that.getDetail(that.options);
						that.getConfirmList();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},

		//收款日期
		incomegetMoneyDate(e) {
			this.income.income_date = e.ymd;
		},
		//删除收款日期
		deletegetMoney() {
			this.income.income_date = '';
		},
		//签单时间
		getSignDate(e) {
			this.order.sign_date = e.ymd;
		}
	}
};
</script>

<style lang="less">
	.hs-list-item .hs-list-item-right{
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
@import '../common.less';
</style>
